<template>
<div class="imgMergeApp">
  <div class="top">
    <div class="tool-bar" style="--wails-draggable: drag">
			<div class="title">
				<img :src="iconUrl" style="width: 16px; height: 16px" />
				{{ name }}
			</div>
			<div class="tool-btn">
				<div style="cursor: pointer" @click="fullScreen">
					<Icon type="md-expand" />
				</div>
				<div style="cursor: pointer" @click="closeApp">
					<Icon type="md-power" />
				</div>
			</div>
		</div>
  </div>
  <div class="bottom" >
    <div class="left">
				<div>
					<Space>
						<Button size="small" type="default" @click="openFile" >打开</Button>
						<Button size="small" type="default" @click="exportImg" >导出</Button>
					</Space>
				</div>
        <div>
					<Input v-model="fileDir" size="small" />
				</div>
				<div>
					<Slider v-model="imgViewScale" @on-input="onScaleChange"></Slider>
				</div>
    </div>
    <div class="right">
       <div class="imgview" :style="calcStyle">
				<div v-for="(item, index) in imgList"  :key="index" class="img-item-div" :style='{width:item.Width+"px",height:item.Height+"px",top:item.Y+"px",left:item.X+"px"}' >
					<Image :src="item.Url" fit="contain" />
				</div>
			 </div>
    </div>
  </div>
</div>

</template>
<script lang="js">
import { WindowSetSize, WindowToggleMaximise } from "../../wailsjs/runtime/runtime";
import iconUrl from "../assets/images/logo-universal.png";
import { CloseApp, OpenFileDlg,ExportImg} from "../../wailsjs/go/api/MergeRes";
  export default {
    name:"",
    data(){
      return {
        name: "图片合成Plist",
        iconUrl: iconUrl,
				winsSize: {
					w: 800,
					h: 630,
				},
				fileDir:"",
				imgList:[],
				calcStyle:{
					transform:'scale(1)'
				},
				imgViewScale:100,
      }
    },
		mounted() {
			WindowSetSize(this.winsSize.w, this.winsSize.h);
		},
    methods:{
			fullScreen() {
				WindowToggleMaximise();
			},
			closeApp() {
				CloseApp();
			},
			onScaleChange(){
				this.calcStyle={
					transform:`scale(${this.imgViewScale/100})`
				}
			},
			openFile() {
				this.imgList=[]
				OpenFileDlg().then((res) => {
					res.forEach((ele) => {
						let imgFile = ele.Path
						imgFile = imgFile.replace(":", "");
						imgFile = "/" + imgFile.split("\\").join("/");
						ele.Url = imgFile
						this.imgList.push(ele);
					});
				});
			},
			exportImg(){
				ExportImg(this.imgList)
			}
    }
  }
</script>
<style scoped>
	#imgMergeApp {
		height: 100%;
		width: 100%;
		background: none;
	}
  .top{
    height: 30px;
  }

	.tool-bar {
		font-size: 12px;
		color: #000;
		font-weight: 500;
		padding: 0px 9px;
		display: flex;
		background: #fff;
		justify-content: space-between;
		align-items: center;
		height: 30px;
	}
	.tool-btn {
		display: flex;
	}
	.tool-btn div {
		margin-left: 5px;
		font-size: 18px;
	}
	.title {
		display: flex;
		justify-content: space-between;
		justify-items: center;
	}

  .bottom{
    height: calc( 100vh - 30px );
    width: 100%;
    display: flex;
  }
  .bottom .left{
    width: 200px;
    height: 100%;
		padding: 0 10px;
		padding-top: 20px;
		text-align: left;
		border-right: 1px #fff solid;

  }
	.bottom .left>div{
		margin-top: 5px;
	}
  .right{
    flex: 1;
    height: 100%;
		overflow: auto;
  }
	.imgview{
		position: relative;
		transform-origin: left top;
	}
	.img-item-div{
		position: absolute;
	}
</style>